<template>
  <el-dialog
    :title="titleName"
    :visible.sync="open"
    width="500px"
    append-to-body
    @close="closeDialog"
  >
    <el-form ref="form" :model="dynamicForm" :rules="rules" label-width="80px">
      <el-form-item label="名称" prop="mdName">
        <el-input v-model="dynamicForm.mdName" placeholder="请输入名称" />
      </el-form-item>
      <el-row>
        <el-col :span="17">
          <el-form-item label="表单编号" prop="mdCode">
            <el-input
              v-model="dynamicForm.mdCode"
              placeholder="请输入表单编号"
            />
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="6">
          <el-form-item label-width="80">
            <el-switch
              v-model="autoGenFlag"
              active-color="#13ce66"
              active-text="自动生成"
              @change="handleAutoGenChange(autoGenFlag)"
            >
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="所属模块" prop="mdModel">
        <el-input v-model="dynamicForm.mdModel" placeholder="请输入所属模块" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="dynamicForm.mdType" placeholder="请选择类型">
          <el-option
            v-for="dict in dict.type.flow_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dynamicForm.remark" type="textarea" rows="3" placeholder="请输入名称" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDynamic, getDynamicById } from "@/api/flow/dynamic";
import { getTitleNameDialog } from "@/utils/component.js";

export default {
  name: "DynamicDialog",
  dicts: ["flow_type", "start_type"],
  props: {
    isShow: Boolean,
    type: String,
    dynamicId: String,
  },
  computed: {
    titleName() {
      return getTitleNameDialog(this.type, "动态表单");
    },
  },
  data() {
    return {
      dynamicForm: {
        // createBy: "",
        // createId: "",
        // createName: "",
        // createTime: "",
        // mdCode: "",
        // mdId: "", ID
        // mdModel: "", 模块
        // mdName: "", 名称
        // mdParam: "", 参数
        // mdTemp: "", 模版
        // mdType: "", 类型
        // params: {}, 参数
        // remark: "", 备注
        // searchValue: "",
        // updateBy: "",
        // updateId: "",
        // updateName: "",
        // updateTime: "",
      },
      // 表单校验
      rules: {},
      open: false,
      autoGenFlag: false,
    };
  },
  methods: {
    cancel() {
      this.reset();
      this.closeDialog();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.dynamicForm.mdId != null) {
            updateWork(this.dynamicForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.closeDialog();
              this.updateListData();
            });
          } else {
            addDynamic(this.dynamicForm).then((response) => {
              console.log("response", response)
              this.$modal.msgSuccess("新增成功");
              this.closeDialog();
              this.updateListData();
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      console.log("reset");
      this.dynamicForm = {
        createBy: "",
        createId: "",
        createName: "",
        createTime: "",
        mdCode: "",
        mdId: null,
        mdModel: "",
        mdName: "",
        mdParam: "",
        mdTemp: "",
        mdType: "",
        params: {},
        remark: "",
        searchValue: "",
        updateBy: "",
        updateId: "",
        updateName: "",
        updateTime: "",
      };
      this.resetForm("form");
    },
    /** 关闭弹窗 */
    closeDialog() {
      this.$emit("close");
    },
    /** 更新表单数据 */
    updateListData() {
      this.$emit("updateList");
    },
    //自动生成编码
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        // genCode("CAL_PLAN_CODE").then((response) => {
        this.dynamicForm.mdCode = new Date().getTime();
        // });
      } else {
        this.dynamicForm.mdCode = null;
      }
    },
  },
  watch: {
    dynamicId(newId, oldId) {
      getDynamicById(newId).then((response) => {
        this.dynamicForm = response.data;
      });
    },
    isShow(statue, oldStatue) {
      this.reset();
      this.open = statue;
    },
  },
};
</script>

<style></style>
